<template>
  <!-- 好生活资金池-列表-顶部btns-->
  <div class="navBtnsBar">
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane v-for="({label,prop},idx) in btns" :key="idx" :label="label" :name="prop"></el-tab-pane>
    </el-tabs>
  </div>
</template>

<script type="text/ecmascript-6">
let allWidth = {
  btnsScrollWidth: 0,
  btnsBoxWidth: 0
};

export default {
  data() {
    return {
      activeName: ""
    };
  },
  created() {},
  props: ["activeBtn", "btns"],
  computed: {},
  watch: {},
  mounted() {
    this.activeName = this.activeBtn;
  },
  methods: {
    handleClick(tab, even) {
      this.$emit("btnsClick", tab.name);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus">
.navBtnsBar {
  .el-tabs--card>.el-tabs__header {
    border-bottom: none;
  }

  .el-tabs--card>.el-tabs__header .el-tabs__item {
    margin-right: 20px;
    border: 1px solid #e4e7ed;
    border-radius: 4px;
  }

  .el-tabs--card>.el-tabs__header .el-tabs__item:first-child {
    border-left: 1px solid #E4E7ED;
  }

  .el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
    border-bottom-color: 1px solid #E4E7ED;
    background: #409eff;
    color: #fff;
  }
  .el-tabs--card>.el-tabs__header .el-tabs__nav{
    border:none;
  }
}
</style>
<style lang="stylus" scoped>
.navBox {
  width: 100%;
  display: flex;
  height: 40px;
  margin: 10px 0;
  overflow: hidden;

  .btns-auto {
    overflow: auto;
    height: 120px;
  }
}
</style>
